const path = require('path')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const pageConfig = require('./page.js')
let webpackConfig = () => {
  let config = {
    entry: {},
    output: {
      filename: 'static/js/[name].[hash].js',
      path: path.resolve('./dist'),
      publicPath: '/',
    },
    plugins: [
      new CleanWebpackPlugin(),
    ],
    module: {
      rules: [{
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader'],
          exclude: /node_module/
        },
        {
          test: /\.less$/,
          use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
          exclude: /node_module/
        },
        {
          test: /\.s[ac]ss$/,
          use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
          exclude: /node_module/
        },
        {
          test: /\.(png|svg|gif|jpg)$/,
          use: ['file-loader']
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: ['file-loader']
        },
        {
          test: /\.js$/,
          use: ['babel-loader'],
          exclude: /node_modules/
        }
      ]
    },
    // 别名是用来import的，需要加入eslint忽略规则，否则报错
    resolve: {
      alias: {
        '@@': path.resolve(__dirname, './src/images')
      }
    }
  }
  return config
}
let config = webpackConfig()
if (pageConfig && Array.isArray(pageConfig)) {
  pageConfig.map(page => {
    config.entry[page.name] = page.jsEntry;
    config.plugins.push(new HtmlWebpackPlugin({
      filename: path.join(__dirname, `/dist/${page.name}.html`),
      template: path.join(__dirname, `/${page.html}`),
      inject: true,
      hash: true,
      chunks: [page.name],
      inlineSource: '.(js|css)$',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }))
  })
}
module.exports = config;

// 如果这种形式，返回的就是一个对象，在webpack.config.js里面直接merge common就可以，如果是上面那种形式，module.exports返回的是一个函数， 是需要执行的，执行之后返回的才是一个对象。
// module.exports = {
//   entry: {
//     app: path.resolve(__dirname, './src/scripts/index.js')
//   },
//   output: {
//     filename: '[name].[hash].js',
//     path: path.resolve('./dist')
//   },
//   plugins: [
//     new CleanWebpackPlugin(),
//     new HtmlWebpackPlugin({
//       title: 'test'
//     })
//   ],
//   module: {
//     rules: [
//       {
//         test: /\.css$/,
//         use: ['style-loader', 'css-loader', 'postcss-loader'],
//         exclude: /node_module/
//       },
//       {
//         test: /\.less$/,
//         use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
//         exclude: /node_module/
//       },
//       {
//         test: /\.s[ac]ss$/,
//         use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
//         exclude: /node_module/
//       },
//       {
//         test: /\.js$/,
//         use: ['babel-loader'],
//         exclude: /node_modules/
//       }
//     ]
//   }
// }